<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/bootstrap.css">
    <style>
        body{
            background:#fee;
        }
        .container{
            width:800px;
            margin:30px auto;
        }
    </style>
</head>

<body>
    <div id="app"></div>
    <template id="txt">
        <div class="container">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <td>编号</td>
                        <td>用户名</td>
                        <td>年龄</td>
                        <td>性别</td>
                        <td>手机号</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody class="">
                    <tr v-for="user in users">
                        <td>{{user.id}}</td>
                        <td>{{user.username}}</td>
                        <td>{{user.age}}</td>
                        <td>{{user.sex}}</td>
                        <td>{{user.phone}}</td>
                        <td>
                            <button @click="del(user.id)" class="btn btn-danger">删除</button>
                            <a :href="'/update.html#'+user.id" class="btn btn-success">编辑</a>
                        </td>
                      
                    </tr>
                </tbody>
            </table>
            <a href="/add.html" class="btn btn-success">添加</a>
        </div>
    </template>
</body>
<script src="/vue.min.js"></script>
<script src="/jquery.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        template: '#txt',
        data: function () {
            return {
                users: []
            }
        },
        created: function () {
            this.getUsers();
        },
        methods: {
            getUsers: function () {
                var _this = this
                $.get('/users').done(function (result) {
                    _this.users = result
                    console.log(result)
                })
            },
            del: function (id) {
                if (confirm('确定删除吗？')) {
                    $.get('/users/del', { id: id }).done(function () {
                        location.reload()
                        console.log(id)
                    })
                }

            }
        }
    })
</script>

</html>